<!-- 商品详情 -->
<template>
  <div>
    <div class="product-detail-wrapper" v-if="ifLoad">
      <!-- header  -->
      <detail-header :backurl="$route.meta.backurl" v-if="!isPreviewPicture"></detail-header>
      <!-- body -->
      <detail-body :isStock="productDetail.goods_storage"></detail-body>

      <!-- footer -->
      <detail-footer v-if="!isPreviewPicture"></detail-footer>
      <!-- 预览图片 -->
      <preview-picture v-if="isPreviewPicture" :defaultindex="swipeId" :isshow="isPreviewPicture"></preview-picture>
      <!-- 促销信息 -->
      <promotion-popup v-if="promoPopstatus" :promo-popstatus="promoPopstatus"></promotion-popup>
    </div>
    <div class="pre-load-wrapper" v-else>
      <img
        src=""
        class="pre-load"
      />
    </div>
    <vue-picture-preview ref="previewer" :list="priviewList"></vue-picture-preview>
    <vue-picture-preview ref="mainSrc" :list="rishTextImageList"></vue-picture-preview>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import DetailHeader from "./DetailHeader";
import DetailBody from "./DetailBody";
import DetailFooter from "./DetailFooter";
import PreviewPicture from "./child/PreviewPicture";
import PromotionPopup from "./child/PromotionPopup";
import vuePicturePreview from "vue-picture-preview";
// import { scoreGet } from '../../api/score'
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      cartNumber: 0,
      productId: this.$route.query.goods_id ? this.$route.query.goods_id : "",
      hideFooter: false,
      popupVisible: true,
      currentScore: 0,
      bargain_id: this.$route.query.bargain_id,
      ifLoad: false,
      is_test: "",
    };
  },

  components: {
    DetailHeader,
    DetailBody,
    DetailFooter,
    PreviewPicture,
    PromotionPopup,
    vuePicturePreview,
  },

  beforeRouteEnter(to, from, next) {
    if (from.path == "/") {
      to.meta.backurl = true;
    } else {
      to.meta.backurl = false;
    }
    next();
  },
  created() {
    // getHistory();
    // var flag = false;
    // setTimeout(function () {
    //   flag = true;
    // }, 1000);
    // window.addEventListener(
    //   "popstate",
    //   function (e) {
    //     //监听到返回事件
    //     if (flag) {
    //       var mo = function (e) {
    //         e.preventDefault();
    //       };
    //       document.body.style.overflow = ""; // 出现滚动条
    //       document.removeEventListener("touchmove", mo, false);
    //       console.log(12121212);
    //       //自己想要做的事情
    //     }
    //     getHistory();
    //   },
    //   false
    // );
    // function getHistory() {
    //   var mo = function (e) {
    //     e.preventDefault();
    //   };
    //   document.body.style.overflow = ""; // 出现滚动条
    //   document.removeEventListener("touchmove", mo, false);
    //   // window.history.pushState(state,'title');
    // }

    if (this.$route.query.share_id) {
      localStorage.setItem("share_id", this.$route.query.share_id);
      localStorage.setItem("goods_id", this.$route.query.goods_id);
      localStorage.removeItem("store_id");
    }
    let extra = {};
    if (this.bargain_id) {
      extra["bargain_id"] = this.bargain_id;
    }
    this.getGoodsDetail({
      goods_id: this.productId,
      token: this.token,
      extra: extra,
      update: true,
    })
      .then((res) => {
        this.ifLoad = true;
      })
      .catch((error) => {
        Toast(error.message);
      });
    this.saveCartState(false);
  },

  computed: {
    ...mapState({
      productDetail: (state) => state.goodsdetail.detailInfo,
      currentProductId: (state) => state.goodsdetail.currentProductId,
      token: (state) => state.member.token,
      isPreviewPicture: (state) => state.goodsdetail.isPreviewPicture,
      swipeId: (state) => state.goodsdetail.swipeId,
      promoPopstatus: (state) => state.goodsdetail.promoPopstatus,
      config: (state) => state.config.config,
    }),
    priviewList: function () {
      const list = [];
      if (this.productDetail.photos.length > 0) {
        for (let i = 0; i < this.productDetail.photos.length; i++)
          list.push({ src: this.productDetail.photos[i] });
        // console.log(list)
      }
      return list;
    },
    rishTextImageList: function () {
      const list = [];
      if (!!this.productDetail.goods_body) {
        let rishText = this.productDetail.goods_body;
        rishText.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (
          match,
          src
        ) {
          list.push({ src });
        });
      }
      return list;
    },
  },

  mounted() {
    this.$nextTick(() => {});
  },

  beforeRouteUpdate(to, from, next) {
    next();
    window.location.reload();
  },

  methods: {
    shouSrc(src) {
      for (var i = 0; i < this.rishTextImageList.length; i++) {
        var _index = this.rishTextImageList[i].src.indexOf(src);
        if (_index >= 0) {
          this.$refs.mainSrc.show(i);
        }
      }
    },
    ...mapMutations({
      saveCartState: "saveCartState",
    }),
    ...mapActions({
      fetchConfig: "fetchConfig",
      getGoodsDetail: "getGoodsDetail",
    }),
    showPreview(index) {
      this.$refs.previewer.show(index);
    },
    //  shouSrc() {
    //   this.$refs.mainSrc.show(0);
    // },
    loadConfig(imgUrl, desc, link) {
      this.fetchConfig().then(
        (response) => {
          let wechat = response.config["wechat.web"];
          // let openid = this.$cookie.get('o')
          // 微信已授权
          if (wechat) {
            this.setWechatConfig(wechat, imgUrl, desc, link);
          }
        },
        (error) => {}
      );
    },
    setWechatConfig(config, imgUrl, desc, link) {
      this.wxApi.wxRegister(config, "商品详情", imgUrl, desc, link);
    },
  },
};
</script>

<style lang="scss" scoped>
.product-detail-wrapper {
  height: 100%;
  width: auto;
}

.pre-load-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.pre-load {
  width: 100%;
  height: 100%;
}
</style>
